<template>
	<view>
		<view :style="[navbarStyle]"></view>
	</view>
</template>

<script>
	// 获取系统状态栏的高度
	let systemInfo = uni.getSystemInfoSync();
	let menuButtonInfo = {};
	// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
	menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	// #endif
	export default {
		name: "background",
		props: {
			zIndex: {
				type: [String, Number],
				default: ''
			},
			// 对象形式，因为用户可能定义一个纯色，或者线性渐变的颜色
			background: {
				type: Object,
				default () {
					return {
						// 导航栏背景图
						'background-color': '#fff',
						'top': 0
					}
				}
			}
		},
		data() {
			return {
				statusBarHeight: systemInfo.statusBarHeight
			};
		},
		computed: {
			// 整个导航栏的样式
			navbarStyle() {
				let style = {};
				style.zIndex = this.zIndex;
				// 合并用户传递的背景色对象
				if (typeof(this.background.top) != 'undefined') {
					this.background.top = this.background.top + 'px';
				} else {
					this.background.top = Number(this.navbarHeight) + this.statusBarHeight + 'px';
				}
				Object.assign(style, this.background);
				return style;
			},
			// 转换字符数值为真正的数值
			navbarHeight() {
				// #ifdef APP-PLUS || H5
				return this.height ? this.height : 44;
				// #endif
				// #ifdef MP
				// 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
				// 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
				// return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
				let height = systemInfo.platform == 'ios' ? 44 : 48;
				return this.height ? this.height : height;
				// #endif
			}
		}
	}
</script>

<style>

</style>